<template>
  <div class="container">
    <img src="../assets/images/common/face.png" alt="" class="face-img" />
    <servicer />
    <div class="loan-btn active">
      开始人脸识别
       <input
          type="file"
          accept="video/*"
          capture="user"
          class="updateBtn"
          @change="uplodaCamera($event, 1)"
        />
    </div>

    <!--  -->
    <van-dialog v-model="messageVisible" title="" @confirm="messageOk">
      <div class="message-body">
        <div class="message-text">
          短信验证码已发送至您182****1082的手机号，请注意查收
        </div>
        <div class="message-input">
          <input type="number" class="input" placeholder="请输入短信验证码" />
          <span class="message-input-reload" :class="{ active: !messageNum }">
            {{ messageNum ? messageNum + "s" : "请重新发起" }}
          </span>
        </div>
      </div>
    </van-dialog>
    <Validate :visible="validateVisible" @ok="validateOk" />
  </div>
</template>

<script>
import Validate from '@/components/Validate'
import Servicer from '@/components/Servicer'

export default {
  components: {
    Validate,
    Servicer
  },
  data () {
    return {
      messageVisible: false,
      messageNum: 60,
      validateVisible: true
    }
  },
  mounted () {

  },
  methods: {
    toNext () {
      this.$router.push({
        path: '/license'
      })
    },
    validateOk () {
      this.validateVisible = false
      this.messageVisible = true
      this.messageStart()
    },
    messageStart () {
      setTimeout(() => {
        if (!this.messageNum) return

        this.messageNum--
        this.messageStart()
      }, 1000)
    },
    messageOk () {
      this.messageVisible = false
    },
    uplodaCamera (e) {
      console.log(e)
      const file = e.target.files[0]
      console.log(file.name)
      this.$toast2({
        msg: '人脸识别通过'
      })
      setTimeout(() => {
        this.toNext()
      }, 1500)
    }
  }
}
</script>

<style scoped lang="less">
.face-img {
  display: block;
  width: 100%;
  margin: 10% auto 0;
}

.loan-btn {
  position: relative;
  display: block;
  margin: 42px auto;
  width: 192px;
  height: 70px;
  line-height: 70px;
  // border: 1px solid #ccc;
  background-image: url("../assets/images/loan/btn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  color: ccc;
  font-size: 20px;

  &.active {
    color: #fff;
    background-image: url("../assets/images/loan/btn_active.png");
  }
}

.message-body{
  padding: 22px 16px;
  text-align: left;
  .message-text{
    font-size: 16px;
    color: #000;
  }
  .message-input{
    box-sizing: border-box;
    width: 100%;
    padding: 6px 8px;
    margin: 16px 0;
    background: #efefef;
    font-size: 16px;
    input{
      width: 60%;
      background: none;
      color: #000;
    }
    .message-input-reload{
      float: right;
      margin: 0 10px 0 0;
      color: #999;
      &.active{
        color: #0ABFFF;
      }
    }
  }
}

.updateBtn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
</style>
